<template>
  <div class="mod-config upload-test">
    <el-row class="upload">
      <fileUpload :fileForm="formData" fileKey="files"> </fileUpload>

      上传的文件ID集合:<br />
      <div v-for="item in formData.files" :key="item">
        {{ item }}
      </div>
    </el-row>

    <el-divider content-position="center">excel导出 </el-divider>

    <div>
      <el-form :inline="true">
        <el-form-item>
          <!--  <el-button @click="exportExcel()">前端导出页面表格</el-button>
        <el-button @click="exportExcel2()">前端导出自定义数据表格</el-button> -->

          <el-button @click="exportExcel3()">后端导出模板表格</el-button>
          <el-button @click="exportExcel4()">后端导出数据表格</el-button>
        </el-form-item>
      </el-form>

      <Table :columns="columns" :datas="datas" :page="false" :showIndex="true">
      </Table>
    </div>
  </div>
</template>
<script>
import fileUpload from "@/components/fileupload";

import Table from "@/components/table";

/*import FileSaver from 'file-saver' 
import XLSX from 'xlsx'
import {formatJson,formatTableJson} from '@/utils/index'*/

export default {
  data() {
    return {
      formData: {
        files: []
      },
      columns: [
        { prop: "date", label: "日期" },
        { prop: "name", label: "姓名" },
        { prop: "address", label: "地址" }
      ],
      datas: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  components: {
    fileUpload,
    Table
  },
  created() {},
  activated() {
    const id = this.$route.query.id;

    this.$message.info("id:" + id);
  },
  methods: {
    exportExcel() {
      /* generate workbook object from table */
      /*var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#studentTable'), xlsxParam)
 
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '学生情况表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout*/
    },
    exportExcel2() {
      /*　require.ensure([], () => {
         
        const { export_jsons_to_excel } = require('@/vendor/Export2Excel');
      　　　　 
      　　const data = formatTableJson(this.columns,this.datas)  
         

          const jsonData = [data ,data]
          const sheetNames = ['学生信息1' ,'学生信息2']
   

          const filename =  '学生信息'
          export_jsons_to_excel(sheetNames, jsonData, filename);

      　　})*/
    },
    exportExcel3() {
      window.location.href = this.$http.adornUrl("/stat/export1");
    },
    exportExcel4() {
      window.location.href = this.$http.adornUrl("/stat/export2");
    }
  }
};
</script>
<style lang="scss">
.upload-test {
  .upload {
    line-height: 50px;
  }
}
</style>
